<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="include/cssheader.jsp"%>
</head>
<body>
	<c:set var="index_selected" value="menu-selected" />
	<!-- black line from top -->
	<div class="header-blackLine"></div>
	<div class="container">
		<%@include file="include/header.jsp"%>
	</div>
	<!-- /.container -->
	<!-- animation wrapper -->
	<div class="page-index-featured responsive-center js-header-animation">
		<div class="container">
			<div class="row">
				<div class="span6">
					<h1>${first.name }</h1>
					<p>${first.description }</p>
					<a class="btn btn-large" href="${contextPath }/product_detail.do?id=${first.id}">更多详情</a>
				</div>
				<div class="span6">
					<img src="${first.images }&width=460&height=256" alt="" />
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<!-- tab buttons -->
		<div class="row">
			<div class="span12">
				<ul id="tab-panel-1" class="content-tab">
					<li id="tab-1" class="tab-selected"><a href="#">推荐</a>
					</li>
					<li id="tab-2"><a href="#">热门</a>
					</li>
					<li id="tab-3"><a href="#">最新</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- tab panels -->
		<div class="tab-panel-wrap tab-panel-1">
			<!-- Tab 1 -->
			<div class="tab-panel tab-1">
				<div class="row">
					<div class="span6 responsive-center">
						<img src="${second.images }&width=460&height=253" alt="" />
					</div>
					<div class="span6">
						<h3>${second.name }</h3>
						<p>${second.description }</p>
						<p>
							<a href="${contextPath }/product_detail.do?id=${second.id}">详细信息</a>
						</p>
					</div>
				</div>
			</div>
			<!-- Tab 2 -->
			<div class="tab-panel tab-2">
				<div class="row">
					<div class="span2"></div>
					<div class="span8">
						<div class="content-scroll" style="height: 360px; overflow: auto">
							<c:forEach items="${products }" var="product">
								<div class="content-scroll-item">
									<img src="${product.images }&width=118&height=64" alt="" />
									<div class="title">
										<a class="black-link-normal" href="${contextPath }/product_detail.do?id=${product.id}">${product.name
											}</a>
									</div>
									<div class="description">${product.description }</div>
								</div>
							</c:forEach>
						</div>
					</div>
				</div>
			</div>
			<!-- Tab 3 -->
			<div class="tab-panel tab-3">
				<div class="row">
					<div class="span6">
						<img src="${third.images }&width=460&height=268" alt="">
					</div>
					<div class="span6">
						<div class="content-scroll" style="height: 200px; overflow: auto; margin-top: 30px;">
							<h3>${third.name }</h3>
							<p>${third.description }</p>
							<a href="${contextPath }/product_detail.do?id=${third.id}" class="black-link">详细信息</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row row-spacer">
			<c:forEach items="${companys }" var="company" end="2">
				<div class="span4">
				<h3>${company.name }</h3>
				<p>${company.description }</p>
				<a href="${contextPath }/${company.id}/${company.nameEn}.do" class="black-link">更多信息</a>
			</div>
			</c:forEach>
		</div>
		<!-- /tab - panel -->
	</div>
	<!-- footer -->
	<%@include file="include/footer.jsp"%>
	<%@include file="include/jsfooter.jsp"%>
</body>
</html>